<template>
	<div class="page">
		<div class="content">
			<view class="row">
				<label>邀请码</label>
				<input v-model="invitationCode" type="text" placeholder="请输入邀请码" />
			</view>
		</div>
		<div class="bottom">
			<button @click="save()">绑定</button>
		</div>
	</div>
</template>
<script>
	import {
		bindInviter
	} from "@/apis/request.js"

	export default {
		data() {
			return {
				invitationCode: null,
			}
		},
		created() {
			this.invitationCode = uni.getStorageSync('inviteCode');
		},
		methods: {
			save() {
				if (!this.invitationCode) {
					this.$Toast('请输入邀请码');
					return;
				}
				bindInviter({
					invitationCode: this.invitationCode
				}).then((res) => {
					uni.removeStorageSync('inviteCode');
					this.$Toast('邀请人绑定成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).catch(err => {
					this.$Toast('请求失败，请重试！');
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F2F2F2;

		.content {
			background-color: #FFFFFF;

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 30rpx;
				width: calc(100% - 60rpx);
				border-top: 1rpx solid #F2F2F2;

				view {
					flex: 1;
					text-align: end;
				}

				input {
					flex: 1;
					text-align: end;
				}

				image {
					margin-left: 10rpx;
					width: 20rpx;
					height: 35rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			display: flex;
			flex-direction: column;
			align-items: center;
			bottom: 0;
			left: 0;
			right: 0;

			view {
				font-size: 26rpx;
				color: #999999;
			}

			button {
				width: calc(100% - 60rpx);
				margin: 30rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 50rpx;
				font-size: 32rpx;
				background: #32C59A;
			}
		}
	}
</style>
